import React, { PureComponent, useRef } from "react";

// 写一个类组件

class TestCpn extends PureComponent {
  render() {
    return <h2>TestCpn</h2>;
  }
}

export default function RefHookDemo01() {
  const titleRef = useRef();
  const inputRef = useRef();
  const testRef = useRef();
  return (
    <div>
      <h2 ref={titleRef}>RefHookDemo01</h2>
      <input ref={inputRef} type="text" />

      {/* 加载组件 */}
      <TestCpn ref={testRef}/>

      <button onClick={(e) => changeDOM()}>修改DOM</button>
    </div>
  );
  function changeDOM() {
    titleRef.current.innerHTML = "我是修改之后的DOM";
    inputRef.current.focus();
    console.log(testRef.current);
  }
}
